<template>
  <view class="customer-warp">
    <view class="customer-head">联系客服</view>
    <view class="customer-item">
      <view class="customer-title">电话联系</view>
      <view class="customer-phone">
        咨询电话：
        <text class="photo" @tap="onPhoneCall(tel)">{{ tel }}</text>
      </view>
      <view class="customer-phone">
        座机电话：
        <text class="photo" @tap="onPhoneCall(landlinePhone)">{{ landlinePhone }}</text>
      </view>
    </view>
    <view class="customer-item">
      <view class="customer-title">微信联系</view>
      <image class="customer-img" :src="customerImg" :show-menu-by-longpress="true" mode="aspectFit"/>
    </view>
  </view>
  <custom-bottom-bar :curTabValue="1"/>
</template>
<script setup>
import {ref} from 'vue';
import {getDictConfigListByType} from "@/package_kuafu_apartment/pages/api/home";
import {onShow} from "@dcloudio/uni-app";
import customBottomBar from '@/package_kuafu_apartment/pages/components/custom-bottom-bar/index.vue'
const tel = ref('')
const landlinePhone = ref('')
const customerImg = ref('')

onShow(() => {
  showData()
})

const showData = async () => {
  let res = await getDictConfigListByType("1")
  let {data, code} = res
  if (code === 200) {
    let vm = data[0].children
    tel.value = vm.find(item => item.id === '2').filedName
    customerImg.value = vm.find(item => item.id === '3').disposeResourceUrl
    landlinePhone.value = vm.find(item => item.id === '1788849610141458433').filedName
  }
}
const onPhoneCall = (phoneNumber) => {
  uni.makePhoneCall({
    phoneNumber
  });
}

</script>
<style lang="less" scoped>
.customer-warp {
  background-color: @color-font;
  height: calc(100vh - 51px);

  .customer-head {
    height: calc(44px + env(safe-area-inset-top));
    line-height: calc(44px + env(safe-area-inset-top));;
    text-align: center;
    font-family: 'ali-m';
    font-weight: 500;
    font-size: 35rpx;
    color: @color-msg;
  }

  .customer-item {
    font-family: 'ali-m';
    font-size: 35rpx;
    color: @color-label;
    padding: 0 20rpx;
    margin-top: 40rpx;
    position: relative;

    .photo {
      color: @color-blue;
    }

    .customer-title {
      font-family: "ali-m";
      font-weight: 500;
      font-size: 38rpx;
      color: @color-black;
      margin-bottom: 40rpx;
    }

    .customer-img {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
</style>
